<template>
  <div>
    <from-input :type="'tel'"
                @checkHandler="checkHandler"
                v-model="form.mobilePhone"
                :validate="validate.mobilePhone"
                :maxLength="11"
                :placeholder="'请填写真实有效的手机号'"></from-input>
    <from-input :type="'tel'"
                @checkHandler="checkHandler"
                v-model="form.code"
                :validate="validate.code"
                :maxLength="6"
                :placeholder="'请填写短信验证码'"> </from-input>
    <mt-button clsss="button"
               type="primary"
               :disabled="!isCheck">登录</mt-button>
    <div class="form-focus">
      <input type="text"
             class="form-focus-item"
             v-model="item.val"
             v-focus="index === focusIndex"
             v-for="(item,index) in inputListA"
             :key="index"
             @input="nextFocusA(index)">
    </div>
    <div class="inputs">
      <div v-for="(item,index) in inputListB"
           :key="index">
        <input type="text"
               v-model="item.val"
               class="border-input"
               @keyup="nextFocusB($event,index)"
               @keydown="changeValue(index)">
      </div>
    </div>
    <div v-click-lock="lockHandler">lock</div>
    <mt-button clsss="button"
               type="primary"
               v-click-lock="lockHandler">lock</mt-button>
  </div>
</template>

<script type="text/ecmascript-6">
import FromInput from 'components/from-input';
import { userServer } from 'api/UserServer';
export default {
	data () {
		return {
			focusIndex : 0,
			inputListA : [{ val : '' }, { val : '' }, { val : '' }],
			inputListB : [{ val : '' }, { val : '' }, { val : '' }],
			form : {
				mobilePhone : '',
				code : ''
			},
			validate : { // 校验
				mobilePhone : {
					name : 'mobilePhone',
					rule : /^((\+?86)|(\(\+86\)))?1[3,4,5,6,7,8,9]\d{9}$/,
					message : '请输入合法的手机号码',
					trigger : ['change'],
					isCheck : false
				},
				code : {
					name : 'code',
					rule : /^\d{6}$/,
					message : '请输入有效的验证码',
					trigger : ['change'],
					isCheck : false
				}
			}
		};
	},
	mounted () {
	},
	computed : {
		isCheck () {
			return Object.values(this.validate).every(v => v.isCheck);
		}
	},
	methods : {
		lockHandler () {
			console.log('lock');
			return userServer.list().then(() => {

			}).catch(() => {
			});


		},
		checkHandler (options) {
			this.validate[options.name].isCheck = options.isCheck;
		},
		nextFocusA (index) {
			this.focusIndex = index + 1;
		},
		/*对焦到下一个input框去*/
		nextFocusB (el, index) {
			var dom = document.getElementsByClassName('border-input'),
				currInput = dom[index],
				nextInput = dom[index + 1],
				lastInput = dom[index - 1];
			/*这里的keyCode 根据不同的平台或许不同,安卓就是不是8*/
			if (el.keyCode !== 8) {
				if (index < (this.inputListA.length - 1)) {
					nextInput.focus();
				} else {
					currInput.blur();
				}
			} else {
				if (index !== 0) {
					lastInput.focus();
				}
			}

		},
		changeValue (index) {
			this.inputListB[index].val = '';
		}
	},
	components : { FromInput }
};
</script>

<style lang="scss">
.form-focus {
  display: flex;
  justify-content: center;
}
.form-focus-item {
  display: block;
  border: 1px solid #cccccc;
  width: 50px;
  height: 50px;
  margin-left: 10px;
}
.border-input {
  background: #ffffff;
  width: 60px;
  font-size: 60px;
  height: 60px;
  margin-left: 15px;
  margin-right: 15px;
  text-align: center;
  border-bottom: 1px solid #333333;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
}

.inputs {
  margin-top: 31px;
  display: flex;
  justify-content: center;
}
</style>
